<%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>

<spring:url value="/resources/js-framework/datatables/jquery.dataTables.css" var="jquery_dataTables_css"/>
<spring:url value="/resources/js-framework/datatables/jquery.dataTables.min.js" var="jquery_dataTables_min_js"/>
<spring:url value="/resources/js-framework/populate/jquery.populate.pack.js" var="jquery_populate_pack_js"/>

<!-- DataTables CSS -->
<link href="${jquery_dataTables_css}" media="screen" rel="stylesheet" type="text/css"/>
<!-- DataTables -->
<script src="${jquery_dataTables_min_js}" type="text/javascript">
        <!-- required for FF3 and Opera -->
</script>

<!-- Populate -->
<script src="${jquery_populate_pack_js}" type="text/javascript">
        <!-- required for FF3 and Opera -->
</script>
<script type="text/javascript" charset="utf-8">
                $(document).ready(function() {
                                var wWidth =  $(document).width();
                                $('.container').css('width', wWidth);
                });
</script>
<script>
		// Wait until the DOM has loaded before querying the document
		$(document).ready(function(){
		$(".tab_div").hide();
		$('ul.tabs a').click(function () {
			$(".tab_div").hide().filter(this.hash).show();
			$("ul.tabs a").removeClass('active');
			$(this).addClass('active');
			return false;
		}).filter(':first').click();
		
		
		$('#projectKickOff').datepicker();
		
		var projectTable = $('#projectTableId').dataTable({
			"sDom": '<"projecttoolbar">lfrtip'
		});
		$("div.projecttoolbar").html(
				'<div class="btnIcon" style="margin-left: 10px; margin-bottom:10px;margin-top:-5px;border:0px solid #ff0000;">'+
					'<a href="#" class="blue_link" id="addNew" >'+
						'<img src="resources/images/addUser.gif" width="16" height="22" /> '+
					'Add New </a>'+
				'</div>');
		
		projectTable.$('tr').dblclick( function () {
  		    var sData = projectTable.fnGetData(this);
  		 
  		    openMaintainance(($(this).attr('id')));
  		});
	
		$('#addNew, #update').click(function(){
			$("#projectForm").reset();
			displayMaintainance();
		});
		$('a[href$="tab2"]').click(function(){
			$("#projectForm").reset();
			
		});
		
		});
		
		function openMaintainance(id){
			getProjectById(id);
			displayMaintainance();
		}
		
		function showProject(data){
			$("#projectForm").populate(data, {debug:false, resetForm:true});
		}
		
		function getProjectById(id){
			$.getJSON("projects/"+id,{}, showProject);
		}
		
		function displayMaintainance(){
			$("ul.tabs a").removeClass('active');
			$(".tab_div").hide().next("#tab2".hash).show();
			$('a[href$="tab2"]').addClass('active');
		}
		
		
		function saveProject(){
			var pk = $("#projectForm input[name=id]").val() ;
			//not doing any validation .. We will use jquery validation framework to do that for us before form gets submitted
			if( pk != null && pk > 0){
				 $.putJson('projects', $("#projectForm").toDeepJson() , function(data){
					 location.reload();
				 } , 'json');
			}else{
				 $.postJson('projects',$("#projectForm").toDeepJson() , function(data){
					 //should call refreshGrid instead of location reload, and update customerTableId table.
					 location.reload();
				}, 'json'); 				
			}
		}
		function refreshGrid(){
			$.getJSON("customers", function(data){
				
			});
		}
		
</script>

        <div class="mid_section"> 
          <!--right section-->
          <div class="botMargin">
            <h1>Project</h1>
          </div>
          <div class="tab_seaction">
            <ul class='tabs'>
              <li><a href='#tab1'>List</a></li>
              <li><a href='#tab2'>Maitainance</a></li>
            </ul>
            <div id='tab1' class="tab_div">
              <div class="tbl">
                <table  class="dataTable" id="projectTableId">
                  <thead>
                    <tr>
                      <th width="7%" align="center" valign="middle">Project ID </th>
                      <th width="8%" align="center" valign="middle">Project Name</th>
                      <th width="8%" align="center" valign="middle">Customer Name</th>
                      <th width="6%" align="center" valign="middle">Customer Type</th>
                      <th width="10%" align="center" valign="middle">Offshore  Manager</th>
                      <th width="10%" align="center" valign="middle">Onsite  Manager </th>
                      <th width="10%" align="center" valign="middle">Engagement Mode</th>
                      <th width="10%" align="center" valign="middle">Project Kick off Date</th>
                      <th width="10%" align="center" valign="middle">Planned Project Size</th>
                      <th width="10%" align="center" valign="middle">Project tracking Currency </th>
                      <th width="10%" align="center" valign="middle">Planned Project Cost</th>
                    </tr>
                  </thead>
                  <tbody>
                  
                  <c:forEach var="project" items="${projects}">
			         <tr id="${project.id}">
			                <td align="center" valign="middle"> 
			                	<a href="#" onclick="openMaintainance(${project.id});"> ${project.id}</a>
			                </td>
			                <td align="center" valign="middle">${project.projectName}</td>
			                <td align="center" valign="middle">${project.customerNameId.customerName}</td>
			                 <td align="center" valign="middle">
			                 	<c:choose>
							    	<c:when test="${project.deere}">
							        	JD
							    	</c:when>
							    	<c:otherwise>
							        	Non-JD
							    	</c:otherwise>
								</c:choose>
			                 </td>   
			                 <td align="center" valign="middle">${project.offshoreDelMgr}</td>
			                 <td align="center" valign="middle">${project.onsiteDelMgr}</td>
			                 <td align="center" valign="middle">${project.engagementModelId.engagementModelName}</td>
			                 <td align="center" valign="middle">${project.projectKickOff}</td>
			                 <td align="center" valign="middle">${project.plannedProjSize}</td>
			                 <td align="center" valign="middle">${project.projectTrackingCurrencyId.currencyName}</td>
			                 <td align="center" valign="middle">${project.plannedProjCost}</td>
			            </tr>
			        </c:forEach>
                  </tbody>
                </table>
              </div>
              <div class="clear"></div>
            </div>
            <div id='tab2' class="tab_div">
              <div class="search_filter">
                <div align="right"> <a href="#" class="blue_link" id="save" onclick="saveProject();">
                <img src="resources/images/save.png" name="save" width="16" height="22"  /> Save </a> 
             	</div>
             	</div>
              <div class="form">
              <form id="projectForm" name="projectForm" action="projects">
	                <table border="0" cellpadding="0" cellspacing="5" width="100%">
	                  <tr>
	                    <td width="15%" align="right">Project ID :<span class="astric">*</span></td>
	                    <td width="18%" align="left"><input type="text" value="" name="id" readonly="readonly" /></td>
	                    <td width="15%" align="right">Project Name:<span class="astric">*</span></td>
	                    <td width="15%" align="left"><input type="text" value="" name="projectName"></td>
	                    <td width="18%" align="right">Customer Name:<span class="astric">*</span></td>
	                    <td width="20%" align="left">
		                    <select id="customerNameId.id" name="customerNameId.id" class="dd_cmn">
								<c:forEach var="customer" items="${customers}">
					                <option  value="${customer.id}">
					                  <c:out value="${customer.customerName}" />
					                </option>
					              </c:forEach>
	                    	</select>
	                     </td>
	                  </tr>
	                  <tr>
	                    <td align="right">Customer:<span class="astric">*</span></td>
	                    <td align="left">
	                    	<div class="radio_btn"> 
	                    		<span class="radio_b">
	                        		<input type="radio" value="true" name="deere">
	                        	</span> 
	                        	<span class="radio_lbl">Deere </span> 
	                        </div>
	                      	<div class="radio_btn"> 
	                      		<span class="radio_b">
	                        		<input type="radio" value="false" name="deere">
	                        	</span> 
	                        	<span class="radio_lbl">Non Deere </span> 
	                        </div></td>
	                    <td align="right">Customer Contacts:</td>
	                    <td align="left"><input type="text" value="" name="customerContacts"></td>
	                    <td align="right">Offshore Manager:<span class="astric">*</span></td>
	                    <td align="left">
		                    <select name="offshoreDelMgr" class="dd_cmn" >
		                        <option value="Loaned">Loaned</option>
		                        <option value="Own">Own</option>
		                    </select>
	                    </td>
	                  </tr>
	                  <tr>
	                    <td align="right">Onsite Manager:</td>
	                    <td align="left"><input type="text" value="" name="onsiteDelMgr" /></td>
	                    <td align="right">Engagement Model:</td>
	                    <td align="left">
	                    	<select id.="engagementModelId.id" name="engagementModelId.id" class="dd_cmn">
								<c:forEach var="engagementmodel" items="${engagementmodels}">
					                <option  value="${engagementmodel.id}">
					                  <c:out value="${engagementmodel.engagementModelName}" />
					                </option>
					              </c:forEach>
	                    	</select>
	                    </td>
	                    <td align="right">Project Kick off date:</td>
	                    <td  align="left"><input type="text" value="" name="projectKickOff" id="projectKickOff" /></td>
	                  </tr>
	                  <tr>
	                    <td align="right">Planned Project Size:</td>
	                    <td align="left"><input type="text" value="" name="plannedProjSize" /></td>
	                    <td align="right">Project tracking currency:</td>
	                    <td align="left">
		                    <select id="projectTrackingCurrencyId.id" name="projectTrackingCurrencyId.id" class="dd_cmn">
									<c:forEach var="currency" items="${currencys}">
						                <option  value="${currency.id}">
						                  <c:out value="${currency.currencyName}" />
						                </option>
						              </c:forEach>
		                    </select>
	                      </td>
	                    <td align="right">Planned Project Cost:</td>
	                    <td align="left"><input type="text" value="" name="plannedProjCost" /></td>
	                  </tr>
	                </table>
                </form>
              </div>
              <blockquote>&nbsp;</blockquote>

            </div>
          </div>
          <!--right section-->
        </div>